<script setup>
import { ref } from 'vue'
import { Loading } from '@element-plus/icons-vue'
const emits = defineEmits(['createPeer'])

// eslint-disable-next-line no-unused-vars
const props = defineProps({
  isConn: {
    type: Boolean,
    default: false
  }
})
const serverAddress = ref('http://192.168.137.103:8095')
const localId = ref('4071')
const remoteId = ref('4070')
const createP2PConnection = () => {
  emits('createPeer')
}
defineExpose({
  serverAddress,
  localId,
  remoteId
})
</script>
<template>
  <div class="flex justify-center pt-[20px]">
    <el-space v-if="!isConn">
      <el-input v-model="serverAddress" style="width: 300px" placeholder="信令服务器地址">
        <template #prefix>
          <span>信令地址:</span>
        </template></el-input
      >
      <el-input v-model="localId" placeholder="本地id">
        <template #prefix>
          <span>本地ID:</span>
        </template>
      </el-input>
      <el-input v-model="remoteId" placeholder="远端id">
        <template #prefix>
          <span>远端ID:</span>
        </template>
      </el-input>
      <el-button type="primary" @click="createP2PConnection()">连接</el-button>
    </el-space>
    <div v-if="isConn">
      <div class="text-center">
        <el-icon size="30" class="is-loading">
          <Loading />
        </el-icon>
      </div>
      <div class="mt-1 text-[#eee] text-[12px] tracking-[1px]">连接成功, 等待推流...</div>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
